import React from 'react';
import { Image, View } from "@tarojs/components";
import { INewDevice, CapacityState } from '@/models/deviceList/deviceCapacity';
import { GStyleSheet } from '@/utils/DarkMode';
import LoadingImage from '@/components/LoadingImage';
import bleSelIcon from '@/assets/images/home_icon_ble_sel.png';
import bleNolIcon from '@/assets/images/home_icon_ble_unsel.png';
import bleLoadingIcon from '@/assets/images/home_icon_ble_loarding.png';
import bleGaryIcon from '@/assets/images/home_icon_ble_offline.png';
import wifiSelIcon from '@/assets/images/home_icon_wifi_sel.png';
import wifiNolIcon from '@/assets/images/home_icon_wifi_unsel.png';
import wifiLoadingIcon from '@/assets/images/home_icon_wifi_loading.png';
import wifiGaryIcon from '@/assets/images/home_icon_wifi_offline.png';
import wifiSubscribeIcon from '@/assets/images/home_icon_loading.png';
import deviceListModel from '@/models/deviceList';


const dstyles = GStyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    display: 'flex',
  },
  capacityItem: {
    marginLeft: 10,
    alignItems: 'center',
    display: 'flex',
  },
  capacityImage: {
    width: 30,
    height: 30,
  },
});

interface IProps {
  device: INewDevice;
}

export default class CapacityView extends React.Component<IProps> {
  state = {
    bleLoading: false,
    wifiLoading: false,
  };

  connectBleDevice = () => {
    this.setState({ bleLoading: true });
    const { device } = this.props;
    deviceListModel.connectBleDevice(device).then(() => {
      this.setState({ bleLoading: false });
    });
  };

  disconnectBleDevice = () => {
    this.setState({ wifiLoading: true });
    const { device } = this.props;
    deviceListModel.disconnectFakeBleDevice(device).then(() => {
      this.setState({ wifiLoading: false });
    });
  };

  subscribedDevice = () => {
    const { device } = this.props;
    deviceListModel.setDeviceSubscribe(device, false);
  };

  renderItem = ({ icon, onPress, needLoading = false }:
    { icon: string, onPress?: () => void, needLoading: boolean }) => {
    const styles = dstyles.style;
    return (
      <View onClick={(e) => {
        e.stopPropagation();
        if (onPress) {
          onPress();
        }
      }} style={styles.capacityItem}>
        {needLoading ? <LoadingImage source={icon} style={styles.capacityImage} />
          : <Image src={icon} style={styles.capacityImage} />}
      </View>
    );
  };

  renderBleCapacity = () => {
    const { bleLoading } = this.state;
    if (bleLoading) {
      return this.renderItem({ icon: bleLoadingIcon, needLoading: true });
    }
    const { device } = this.props;
    if (device.bleCapacity) {
      let icon = bleGaryIcon;
      let onPress;
      let needLoading = false;
      switch (device.bleCapacity.state) {
        case CapacityState.connecting:
          icon = bleLoadingIcon;
          needLoading = true;
          break;
        case CapacityState.online:
          icon = bleNolIcon;
          onPress = this.connectBleDevice;
          break;
        case CapacityState.controllable:
          icon = bleSelIcon;
          break;
        default:
          break;
      }
      return this.renderItem({ icon, onPress, needLoading });
    }
    return null;
  };

  renderWifiCapacity = () => {
    const { wifiLoading } = this.state;
    if (wifiLoading) {
      return this.renderItem({ icon: wifiLoadingIcon, needLoading: true });
    }
    const { device } = this.props;
    // console.log('renderWifiCapacity', device.wifiCapacity, device.bleCapacity);
    if (device.wifiCapacity) {
      if (!device.bleCapacity) {
        // 单wifi设备，只在订阅的时候显示loading
        if (device.wifiCapacity.state === CapacityState.inPreparation) {
          return this.renderItem({ icon: wifiSubscribeIcon, needLoading: true });
        }
        return null;
      }
      let icon = wifiGaryIcon;
      let onPress;
      let needLoading = false;
      switch (device.wifiCapacity.state) {
        case CapacityState.connecting:
          icon = wifiLoadingIcon;
          needLoading = true;
          break;
        case CapacityState.online:
          icon = wifiNolIcon;
          onPress = this.subscribedDevice; // 不应该出现这样UI，但还是保留下这个逻辑
          break;
        case CapacityState.controllable:
          if (device.bleCapacity && device.bleCapacity.state === CapacityState.controllable) {
            // 如果蓝牙是可控，这时候把wifi改成在线的icon，代表此时数据是走蓝牙能力的
            icon = wifiNolIcon;
            onPress = this.disconnectBleDevice;
          } else {
            icon = wifiSelIcon;
          }
          break;
        case CapacityState.inPreparation:
          if (device.bleCapacity && (device.bleCapacity.state === CapacityState.controllable || device.bleCapacity.state === CapacityState.connecting)) {
            // 如果蓝牙是可控或者连接中，代表其实不是在自动订阅范围内，显示成在线即可
            icon = wifiNolIcon;
            onPress = this.disconnectBleDevice;
          } else {
            icon = wifiSubscribeIcon;
            needLoading = true;
          }
          break;
        default:
          break;
      }
      return this.renderItem({ icon, onPress, needLoading });
    }
    return null;
  };

  render() {
    const styles = dstyles.style;
    return (
      <View style={styles.container}>
        {this.renderBleCapacity()}
        {this.renderWifiCapacity()}
      </View>
    );
  }
}
